<template>
  <div class="picture-login">
    <div class="login-container">
      <div class="login-left">
        <div class="left-text">
          <img src="@/assets/common/登录logo.png" alt="" class="left-logo" />
          <h1>图片直播办公后台</h1>
          <p class="left-desc">Image live streaming management</p>
        </div>
      </div>
      <div class="form">
        <div class="formRight">
          <div class="title-container">
            <h3>后台管理系统</h3>
            <p>欢迎登录图片直播后台管理系统</p>
          </div>
          <el-card v-model="loginForm">
            <el-form ref="formRef" :model="loginForm" :rules="rules">
              <el-form-item prop="phone">
                <el-input
                  v-model="loginForm.phone"
                  placeholder="请输入手机号码"
                  prefix-icon="el-icon-user-solid"
                >
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="loginForm.password"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-unlock"
                  type="password"
                ></el-input>
                <!-- 小眼睛图标 -->
                <span @click="togglePasswordVisibility">
                  <i class="fa fa-eye" v-if="!showPassword"></i>
                  <i class="fa fa-eye-slash" v-else></i>
                </span>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  style="width: 260px"
                  :loading="loading"
                  @click="login"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// const isDev = process.env.NODE_ENV === "development"; // 开发环境
export default {
  name: "login",
  data() {
    return {
      loading: false,
      loginForm: {
        phone: "",
        password: "",
      },
      showPassword: false, // 默认密码不显示
      rules: {
        phone: [
          { required: true, message: "请输入手机号" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请填写正确的手机号",
          },
        ],
        password: [
          {
            required: true,
            message: "请填写密码",
          },
          {
            min: 6, // 最小位数
            max: 16, // 最大位数
            message: "密码必须6-16位",
          },
        ],
      },
    };
  },
  methods: {
    // 点击小眼睛
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword; // 切换密码显示状态
      // 如果密码输入框是文本类型，则显示密码，否则为密码类型
      this.passwordInput.type = this.showPassword ? "text" : "password";
    },
    async login() {
      try {
        // 表单校验
        await this.$refs.formRef.validate();
        this.loading = true;
        // 调用登录的actions
        await this.$store.dispatch("user/login", this.loginForm);
        // 跳转到主页面
        this.$router.push("/");
      } catch (e) {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.login-left {
  width: 440px;
  height: 590px;
  /* background-color: pink; */
}

#app {
  position: relative;
}
.picture-login {
  background-image: url(../../assets/common/login-bgc.webp);
  background-repeat: repeat;
  height: 100%;
}

el-form-item {
  background: #edeff5;
}
.login-container {
  display: flex;
  transform: translateX(5%) translateY(25%);
  width: 980px;
  height: 590px;
  margin: auto auto;
}

.form {
  border: 1px solid;
  padding: 60px 70px;
  left: 50%;
  top: 50%;
  width: 440px;
  text-align: left;
  background-color: #fff;
}
.el-card {
  padding: 0px;
  border: none;
}
.el-input {
  height: 44px;
}
h3 {
  font-size: 28px;
  color: #333;
  margin: 0;
  font-weight: 700;
}
p {
  margin: 12px 0 40px;
  font-size: 13px;
}
el-button {
  margin-top: 30px;
  padding: 15px 20px;
}

.left-text {
  color: #fff;
  padding: 30px 30px;
  text-align: left;
}

.left-logo {
  width: 190px;
  height: 67px;
  margin-bottom: 10px;
  border-style: none;
}
h1 {
  font-size: 36px;
  font-weight: 600;
  color: #fff;
  line-height: 48px;
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: 4px;
}
.left-desc {
  font-size: 12px;
  color: #797f91;
  letter-spacing: 4px;
  margin: 5px 0 20px;
}

.login-left {
  background-color: #0e163c;
}
</style>
